<template>
  <div>
    <template v-for="(item, index) in btnModelList">
      <el-button
        v-show="evalExp(item)"
        :key="`item_btnCode_${index}`"
        :type="item.btnType"
        :icon="item.btnIcon"
        :size="item.btnSize"
        :plain="item.plain"
        :round="item.round"
        :circle="item.circle"
        @click="btnClick(item)"
      >
        {{ item.btnName }}</el-button>
    </template>
    <el-dialog custom-class="dialogForm" width="70%" :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" append-to-body @close="popupClose()">
      <popup ref="popup" :ref-type="transmit" @receve="receveData" />
    </el-dialog>
  </div>
</template>

<script>
import popup from '@/components/desform/online/popup.vue'

export default {
  name: 'OnlineBtnList',
  components: {
    popup
  },
  props: {
    btnModelList: { // 按钮数据
      type: Array,
      default: () => [],
      required: false
    },
    rowData: { // 行数据按钮在表格右侧
      type: [Object, Array],
      default: undefined,
      required: false
    },
    rowIndex: { // 行数据按钮在表格右侧
      type: Number,
      default: 0,
      required: false
    },
    saveFunc: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      display: true,
      formOpen: false,
      title: undefined,
      transmit: false,
      currentBtnItem: {}
    }
  },
  computed: {
    rowScope() {
      return this.rowData
    }
  },
  watch: {
    rowData: {
      handler() {
        this.btnModelList.map(E => {
           this.evalExp(E)
        })
      },
      deep: true,
      immediate: true
    }

  },
  created() {
    // console.log(this.btnModelList)
  },
  methods: {
    setHidden() { // 按钮隐藏条件

    },
    btnClick(item) {
      // 每次点击时的按钮
      this.currentBtnItem = item
      // console.log('行数据', this.rowData)
      let rowData
      if (this.rowData instanceof String) {
        rowData = JSON.parse(this.rowData)
      } else {
        rowData = this.rowScope
      }
      // 如果不存在id 应该是子表单按钮点击了
      if (!(rowData instanceof Array)) {
        this.title = item.btnName
        this.formOpen = true
        this.$nextTick(() => {
          this.$refs.popup.init(rowData, item)
        })
      } else {
        this.transmit = true
        // console.log('酸涩皱眉与你共苦不算太差。')
        this.title = item.btnName
        this.formOpen = true
        // 转对象
        rowData = Object.assign({}, rowData)
        this.$nextTick(() => {
          this.$refs.popup.init(rowData, item)
        })
        //  this.saveFunc()
      }
    },
    evalExp(item) {
      const s = this.doOper(item.btnHide)
      if (s) {
        return this.evil(this.replaceV(s))
      } else {
        return true
      }
    },
    doOper(domains) {
      domains = JSON.parse(domains)
      let domin = ''
      if (!domains || Object.keys(domains[0]).length === 0) { // 默认对象有一个为空。。。
        return ''
      }
      domains.map((d, index) => {
        if (d) {
          domin += d.eField + d.eOper
          if (!isNaN(d.eCondi)) {
            domin += d.eCondi
          } else {
            domin += `'${d.eCondi}'`
          }
          if (index !== domains.length - 1) {
            domin += '&&'
          }
        }
      })
      return domin
    },
    replaceV(eCondi) { // 替换值
      var arrE = eCondi.match(/\{.*?\}/g)
      for (const i of arrE) {
        const val = i.replace('{', '').replace('}', '')
        if (!isNaN(this.rowScope[val])) {
          eCondi = eCondi.replace(i, parseFloat(this.rowScope[val]))
        } else if (this.rowScope instanceof Array) { // 子表单的数据结构有点怪，这里是子表单
            this.rowScope.map(bild => {
              if (bild[val] && isNaN(bild[val])) {
                eCondi = eCondi.replace(i, `'${bild[val]}'`)
              } else if (bild[val] && !isNaN(bild[val])) {
                  eCondi = eCondi.replace(i, parseFloat(bild[val]))
              }
            })
        } else {
          eCondi = eCondi.replace(i, `'${this.rowScope[val]}'`)
        }
      }
      return eCondi
    },
    evil(fn) { // 计算值
      const Fn = Function
      return new Fn('return ' + fn)()
    },
    receveData(data) {
      // 封装子对象需要的参数 往父组件传递
      console.log('this.data', data)
      this.$emit('receve', data, this.currentBtnItem, this.rowIndex)
    },
    popupClose() { // 弹窗关闭事件回调
      this.$refs.popup.confirmHandle()
    }
  }
}
</script>

<style scoped>
</style>
